import { Breadcrumb, Switch, Dropdown } from 'antd'
import { MenuFoldOutlined } from '@ant-design/icons'
import type { MenuProps } from 'antd'
import styles from './index.module.less'
import { useBearStore } from '@/store'

const NavHeader = () => {
  const userInfo = useBearStore(state => state.userInfo)
  const breadList = [{ title: '首页' }, { title: '生产计划' }]
  const items: MenuProps['items'] = [
    {
      key: 1,
      label: userInfo?.email
    },
    {
      key: 2,
      label: '退出'
    }
  ]
  return (
    <div className={styles.navHeader}>
      <div className={styles.left}>
        <MenuFoldOutlined />
        <Breadcrumb className={styles.breadcrumb} items={breadList} />
      </div>
      <div className='right'>
        <Switch className={styles.switch} checkedChildren='暗黑' unCheckedChildren='默认' />
        <Dropdown menu={{ items }} trigger={['click']}>
          <span className={styles.nickName}>{userInfo?.nickname}</span>
        </Dropdown>
      </div>
    </div>
  )
}

export default NavHeader
